<template>
  <div v-loading="loading" class="analysisContainer h-flex v-flex-elastic" @keyup.space="spaceHandler">
    <div class="h-flex-elastic" style="overflow: hidden;">
      <div v-loading="listLoading" class="analysisPictureContainer v-flex">
        <div class="pictureWrapper v-flex-elastic">
          <pillar-query-list v-if="showPillarPager" :pillar-pager="pillarPager" :pillar-id="pillarId" @setDeviceCode="setDeviceCode" />
          <el-container>
            <el-main class="h-flex">
              <div class="divImgBox h-flex-elastic">
                <template v-if="partImgArr.length>0">
                  <div v-viewer="options">
                    <img v-for="img in partImgArr" v-show="showImg(img)" :key="img" :src="img">
                  </div>
                </template>
                <template v-else>
                  <div class="empty">暂无数据</div>
                </template>

              </div>
              <div class="divImgBox h-flex-elastic global-box">
                <template v-if="globalImgArr.length>0">
                  <div v-viewer="options">
                    <img v-for="img in globalImgArr" v-show="showImg(img)" :key="img" :src="img">
                  </div>
                </template>
                <template v-else>
                  <div class="empty">暂无数据</div>
                </template>
              </div>
              <div class="img-prev" @click="prev">
                <i class="el-icon-arrow-left" />
              </div>
              <div class="img-next" @click="next">
                <i class="el-icon-arrow-right" />
              </div>
            </el-main>
          </el-container>
        </div>
        <div class="toolbar-container">
          <div class="toolbar-progress">
            <el-slider
              v-if="responseData.panoramisEndFrame"
              ref="slider"
              v-model="progress"
              :min="1"
              :max="responseData.panoramisEndFrame - responseData.panoramisBeginFrame + 1"
              :show-tooltip="false"
              @input="handleSliderInput"
              @change="handleSliderChange" />
          </div>
          <div class="toolbar-control">
            <div class="img-page-info">
              当前第{{ (currentIndex - responseData.panoramisBeginFrame + 1) || 0 }}帧，共{{ (responseData.panoramisEndFrame - responseData.panoramisBeginFrame + 1) || 0 }}帧
            </div>
            <div class="play-ctrl">
              <el-button v-show="!playStatus" size="mini" @click="changePlayStatus">
                <svg-icon icon-class="play-white" />&nbsp;播放
              </el-button>
              <el-button v-show="playStatus" size="mini" @click="changePlayStatus">
                <svg-icon icon-class="pause-white" />&nbsp;暂停
              </el-button>
              <el-button v-show="!playStatus" size="mini" @click="resetPlay">
                <svg-icon icon-class="play-white" />&nbsp;从头开始播放
              </el-button>
              <el-button size="mini" @click="prev">
                <svg-icon icon-class="fast-forward" style="transform: rotate(180deg);" />&nbsp;上一帧
              </el-button>
              <el-button size="mini" @click="next">
                <svg-icon icon-class="fast-forward" />&nbsp;下一帧
              </el-button>
              <el-select
                v-model="speed"
                class="select-speed"
                popper-class="speed-popper"
                @change="changeSpeed">
                <el-option label="慢速" :value="1000" />
                <el-option label="正常" :value="500" />
                <el-option label="快速" :value="100" />
              </el-select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { findc2ImagesByJobId } from '@/api/cms/detect-data'
export default {
  name: 'SecondCDetail',
  components: {

  },
  props: {
    showPillarPager: {
      type: Boolean,
      default: false
    },
    detectJobId: {
      type: String,
      default: ''
    },
    devClassCode: {
      type: String,
      default: ''
    },
    date: {
      type: String,
      default: ''
    },
    timeAxisType: {
      type: String,
      default: 'default'
    },
    type: String
  },
  data() {
    return {
      loading: false,
      speed: 500,
      playStatus: false,
      options: {
        inline: false,
        filter: this.filterImg,
        toolbar: false
      },
      listLoading: false,
      showIndex: 0,
      progress: 0,
      responseData: {},
      partImgArr: [],
      globalImgArr: [],
      currentIndex: 0,
      cacheNum: 10,
      interval: null,
      pillarPager: [],
      pillarCode: ''
    }
  },
  watch: {
    playStatus(val) {
      // 播放状态
      if (val) {
        this.intervalFn()
      } else {
        this.resetInterval()
      }
    },
    currentIndex() {
      this.progress = this.currentIndex - this.responseData.panoramisBeginFrame + 1
    }
  },
  mounted() {
    this.getImages()
    // 空格控制播放/暂停
    window.addEventListener('keyup', this.spaceHandler)
  },
  beforeDestroy() {
    this.resetInterval()
    window.removeEventListener('keyup', this.spaceHandler)
  },
  methods: {
    intervalFn() {
      this.resetInterval()

      this.interval = setInterval(() => {
        if (this.currentIndex < this.responseData.panoramisEndFrame) {
          this.currentIndex++
          if (this.currentIndex + this.cacheNum <= this.responseData.panoramisEndFrame + 1) {
            this.getImgList(this.currentIndex)
          }
        } else {
          this.playStatus = false
          this.resetInterval()
        }
      }, this.speed)
    },
    resetInterval() {
      if (this.interval) {
        clearInterval(this.interval)
      }
      this.interval = null
    },
    getImages() {
      this.loading = true
      this.listLoading = true
      this.partImgArr = []
      this.globalImgArr = []
      findc2ImagesByJobId({ detectJobId: this.detectJobId }).then(response => {
        this.loading = false
        this.listLoading = false
        if (response.data) {
          const responseData = this.responseData = response.data
          this.$emit('showTitle', responseData)
          this.currentIndex = this.responseData.panoramisBeginFrame
          this.getImgList(this.currentIndex)
        }
      })
    },
    getImgList(min) {
      this.partImgArr = []
      this.globalImgArr = []
      const partPath = this.responseData.partBeginPath.slice(0, this.responseData.partBeginPath.lastIndexOf('/'))
      const panoramisPath = this.responseData.panoramisBeginPath.slice(0, this.responseData.panoramisBeginPath.lastIndexOf('/'))
      let max = min + this.cacheNum - 1
      if (max > this.responseData.panoramisEndFrame) {
        max = this.responseData.panoramisEndFrame
      }
      for (let i = min; i <= max; i++) {
        this.partImgArr.push(this.getImgSrc(partPath, i))
        this.globalImgArr.push(this.getImgSrc(panoramisPath, i))
      }
    },
    getImgSrc(path, index) {
      return `${path}/${index}.jpg`
    },
    getIndex(path) {
      return parseInt(path.slice(path.lastIndexOf('/') + 1, path.lastIndexOf('.')))
    },
    showImg(img) {
      const index = this.getIndex(img)
      if (this.$refs.slider && this.$refs.slider.$refs.button1.dragging) {
        return this.showIndex === index
      }
      if (this.currentIndex === index) {
        this.showIndex = index
        return true
      }
      return false
    },
    filterImg(img) {
      const index = this.getIndex(img.src)
      return this.currentIndex === index
    },
    setDeviceCode(val) {
      this.pillarCode = val
      this.$emit('regetTimeAxis', val, '2C')
    },
    spaceHandler(event) {
      if (event.keyCode === 32) {
        event.preventDefault()
        this.changePlayStatus()
      }
    },
    changePlayStatus() {
      if (this.loading) return
      this.playStatus = !this.playStatus
    },
    resetPlay() {
      if (this.loading) return
      this.currentIndex = this.responseData.panoramisBeginFrame
      this.changePlayStatus()
      this.getImgList(this.currentIndex)
    },
    prev() {
      this.resetInterval()
      this.playStatus = false
      if (this.currentIndex > this.responseData.panoramisBeginFrame) {
        this.currentIndex--
        const firstImg = this.partImgArr[0]
        if (this.getIndex(firstImg) > this.responseData.panoramisBeginFrame) {
          this.getImgList(this.currentIndex)
        }
      }
      // this.intervalFn()
    },
    next() {
      this.resetInterval()
      this.playStatus = false
      if (this.currentIndex < this.responseData.panoramisEndFrame) {
        this.currentIndex++
        const lastImg = this.partImgArr.slice(-1)[0]
        if (this.getIndex(lastImg) < this.responseData.panoramisEndFrame) {
          this.getImgList(this.currentIndex)
        }
      }
      // this.intervalFn()
    },
    changeSpeed(val) {
      this.playStatus = true
      this.intervalFn()
    },
    // 进度条变化时
    handleSliderInput(val) {
      if (this.$refs.slider.$refs.button1.dragging) {
        this.resetInterval()
      }
    },
    // 进度条值变化后
    handleSliderChange(val) {
      this.currentIndex = this.responseData.panoramisBeginFrame + val - 1
      this.getImgList(this.currentIndex)
      if (!this.playStatus) return
      this.intervalFn()
    }
  }
}
</script>

<style lang="scss" scoped>
  .analysisContainer {
    height: 100%;
    color: #fff;
    background: white;

    .analysisPictureContainer {
      position: relative;
      z-index: 1;
      height: 100%;
      padding: 0;
      .pictureWrapper{
        padding: 0 10px;
      }
      .divImgBox {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: white;

        img {
          // height: 100%;
          position: relative;
          width: 100%;
          height: 100%;
          // left: 50%;
          // transform: translateX(-50%);
        }

        div {
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          overflow: auto;
            border: 1px solid #eee;
          &.empty{
            color: #000;
          }
        }
      }

      .el-container {
        height: 100%;
      }

      .el-main {
        position: relative;
        padding: 0;

        .img-prev,
        .img-next {
          position: absolute;
          left: 10px;
          width: 60px;
          height: 100%;
          font-size: 60px;
          cursor: pointer;

          i {
            position: absolute;
            top: 50%;
            left: 50%;
            opacity: 0;
            transition: opacity 0.3s;
            transform: translate(-50%, -50%);
          }

          &:hover {
            i {
              opacity: 1;
            }
          }
        }

        .img-next {
          right: 10px;
          left: initial;
        }
      }

      .toolbar-container {
         background-image: linear-gradient(#F3F5FF, #DFE6FF);
        .toolbar-progress {
          margin: 10px;
        }

        .toolbar-control {
          overflow: hidden;
          .img-page-info {
            float: left;
            color: black;
            padding-left: 10px;
            line-height: 42px;
          }

          .play-ctrl {
            float: left;
            margin-left: 20px;
            padding: 5px;

            .el-button {
              color: #fff;
              background: #005cb0;
              border-color: #005cb0;
              border-radius: 0;
            }

            .select-speed {
              margin-left: 5px;
              width: auto;
              ::v-deep .el-input__inner {
                width: 80px;
                height: 28px;
                line-height: 28px;
                color: #fff;
                background: #005cb0;
                border: 1px #005cb0 solid;
              }

              ::v-deep .el-input__icon {
                line-height: 28px;
              }
            }
          }
        }
      }
    }
  }

  .el-slider {
    ::v-deep .el-slider__runway {
      height: 4px;
      margin: 0;
      background-color: rgba($color: #005cb0, $alpha: 0.3);
      border-radius: 0;

      .el-slider__bar {
        height: 4px;
        background-color: #005cb0;
        border-radius: 0;
      }

      .el-slider__button-wrapper {
        .el-slider__button {
          width: 10px;
          height: 10px;
        }
      }
    }
  }
</style>

<style lang="scss">
.speed-popper {
  color: #fff;
  background: #005cb0;
  border-color: #005cb0;

  .el-select-dropdown__item {
    color: #fff;

    &.hover {
      background: #2974A9;
    }

    &.selected {
      color: #409eff;
    }
  }

  .popper__arrow {
    border-top-color: #1c3369 !important;

    &::after {
      border-top-color: #1c3369 !important;
    }
  }
}
</style>
